<template>
	<view class="content" :style="'padding-top:' + (90 + parseInt(+statusbarHeight)) + 'rpx'">
		<view class="navigation" :style="'padding-top:'+ statusbarHeight + 'rpx'">
			<image v-if="path" @click="pageBack" class="back_icon" src="/static/images/to_left.png" mode="scaleToFill"></image>
			<text>行程申请</text>
		</view>
		<view class="option_box">
			<view class="my_box_top">
				<picker mode="selector" :value="buildIndex" :range="buildList" range-key="text" @change="_buildChange">
					<view class="sel_content">
						<view class="avatoa">
							<text class="my_txt">楼栋选择</text>
						</view>
						<view class="icon_right">
							<text class="hint">{{getBuildName}}</text>
							<view class="my_txt mytxt">
								<image class="arrow_icon" src="/static/images/me/to_right_icon.png" mode="scaleToFill">
								</image>
							</view>
						</view>
					</view>
				</picker>
			</view>
			<view class="my_box_top">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="_dateSelectChange">
					<view class="sel_content">
						<view class="avatoa">
							<text class="my_txt">查看时间</text>
						</view>
						<view class="icon_right">
							<text class="hint">{{date}}</text>
							<view class="my_txt mytxt">
								<image class="arrow_icon" src="/static/images/me/to_right_icon.png" mode="scaleToFill">
								</image>
							</view>
						</view>
					</view>
				</picker>
			</view>
		</view>
		<view class="chart_box">
			<view class="chart">

			</view>
			<view class="card_box">

			</view>
		</view>
		<view class="table_box">
			<uni-table border :stripe="true" emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th width="50" align="center">编号</uni-th>
					<uni-th align="center">楼栋</uni-th>
					<uni-th align="center">姓名</uni-th>
					<uni-th align="center">宿舍</uni-th>
					<uni-th align="center">状态</uni-th>
					<uni-th align="center">班级</uni-th>
					<!-- <uni-th align="center">班主任</uni-th> -->
					<!-- <uni-th align="center">舍长/联系电话</uni-th> -->
					<uni-th align="center">班主任/联系电话</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item,index) in dormList" :key="item.dormId">
					<uni-td width="50" align="center">{{index + 1}}</uni-td>
					<uni-td>{{item.empName}}</uni-td>
					<uni-td>{{getBuildName}}</uni-td>
					<uni-td>{{item.dormName + '宿舍'}}</uni-td>
					<uni-td>
						<view class="tags">
							<view class="tag" :class="item.state == 1 ? 'late' : 'not_backed'">{{item.state == 1 ? '晚归' : '夜不归宿'}}</view>
							<!-- <view class="tag leave">请假{{item.leaveNumb}}人</view> -->
							<!-- <view class="tag not_backed">夜不归宿{{item.stayOutNumb}}人</view> -->
						</view>
					</uni-td>
					<uni-td>{{item.deptName}}</uni-td>
					<!-- <uni-td>Jeson</uni-td> -->
					<!-- <uni-td>{{item.dormLeader}}</uni-td> -->
					<uni-td>{{item.classTeacher}}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="pagination_box">
			<uni-pagination :total="total" v-model="currentPage" :pageSize="15" title="标题文字" prev-text="上一页" next-text="下一页"
				@change="_changePage" />

		</view>
	</view>
</template>

<script>
	import {
		dormParentCollect,
		dormParentFindMan,
		dormParentList
	} from "../../common/api/index.js";
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				statusbarHeight: 45,
				path: null,
				applyType: 3,
				dormList: [],
				buildList: [],
				buildIndex: 0,
				empId: null,
				orgId: null,
				date: currentDate,
				currentPage: 1,
				total: 0
			};
		},
		computed: {
			getBuildName() {
				return this.buildList[this.buildIndex].text
			},
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(option) {
			this.statusbarHeight = uni.getStorageSync('SET_STATUS_BAR') * 2
			this.orgId = option.orgId
			this.empId = option.empId
			this.path = option.path?true:false
			this.applyType = option.applyType
			this._dormParentList()
		},
		methods: {
			_dormParentCollect() {
				dormParentCollect({
					orgId: this.orgId,
					startTime: this.date,
					endTime: this.date
				}).then(res => {
					if (res.code === 0) {} else {

					}
				})
			},
			_dormParentFindMan() {
				this.dormList = []
				dormParentFindMan({
					orgId: this.orgId,
					parentId: this.buildList[this.buildIndex].value,
					currentPage: this.currentPage,
					pageSize: 15,
					startTime: this.date,
					endTime: this.date
				}).then((res) => {
					if (res.code === 0) {
						this.dormList = res.data.list
						this.total = res.data.total
						// for (const key in res.data) {
						// 	if (Object.hasOwnProperty.call(res.data, key)) {
						// 		let element = res.data[key];
						// 		let data = []
						// 		if (key != '总') {
						// 			this.dormList.push(...element)
						// 		} else {
						// 			// attendanceRate.value = element[0].attendanceRate + '%';
						// 			// stayNumb.value = element[0].stayNumb;
						// 			// stayOutNumb.value = element[0].stayOutNumb;
						// 			// lateNumb.value = element[0].lateNumb;
						// 			// leaveNumb.value = element[0].leaveNumb;
						// 			// bedNullAndbedCount.value = element[0].bedNull + '/' + element[0].bedCount;
						// 		}
						// 	}
						// }
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				}).catch(err => {
					console.log(err)
				});
			},
			_dormParentList() {
				dormParentList({
					orgId: this.orgId,
				}).then((res) => {
					if (res.code == 0) {
						if (res.data.length == 0) return
						this.buildList = [{
							value: '',
							text: '全部'
						}]
						res.data.forEach(item => {
							this.buildList.push({
								value: item.dormId,
								text: item.dormName,
							})
						});
						this._buildChange({
							target: {
								value: 1
							}
						})
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					}
				});
			},
			_dateSelectChange(e) {
				this.date = e.target.value
				if (this.buildIndex != 0) {
					this._dormParentFindMan()
				} else {
					this._dormParentCollect()
				}
			},
			_buildChange(e) {
				this.buildIndex = e.target.value
				if (this.buildIndex != 0) {
					this._dormParentFindMan()
				} else {
					this._dormParentCollect()
				}
			},
			_changePage(e) {
				this.currentPage = e.current
				if (this.buildIndex != 0) {
					this._dormParentFindMan()
				} else {
					this._dormParentCollect()
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			pageBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		width: 100vw;
		background-color: #f8f8f8;
	}
	
	.navigation {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		height: 90rpx;
		position: fixed;
		background-color: #FFF;
		top: 0;
		left: 0;
		right: 0;
		color: #333;
		z-index: 9999;
	}
	
	.back_icon {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		left: 12rpx;
	}

	.option_box,
	.table_box {
		background-color: #FFF;
		margin-top: 24upx;
	}

	.my_box_top {
		min-height: 106rpx;
		padding: 24rpx 32rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		position: relative;

		&::after {
			content: "";
			height: 1px;
			transform: scaleY(.5);
			background: #E6E6E6;
			position: absolute;
			right: 0;
			bottom: 0;
			left: 32rpx;
		}

		&:last-child::after {
			height: 0;
		}

		.sel_content {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
	}

	.avatoa {
		display: flex;
		align-items: center;
	}

	.imgava {
		width: 48rpx;
		height: 48rpx;
		margin-right: 15rpx;
	}

	.my_txt {
		font-family: PingFangSC;
		font-weight: 800;
		font-size: 30rpx;
		color: #3C424F;
	}

	.required::before {
		content: "* ";
		font-weight: 800;
		color: #FA6400;
	}

	.mytxt {
		color: rgb(199, 199, 204);
		line-height: 0;
	}

	.arrow_icon {
		display: inline-block;
		width: 48rpx;
		height: 48rpx;
	}

	.icon_right {
		display: flex;
		flex-direction: row;
		align-items: center;

		input {
			width: 160rpx;
		}
	}

	.hint {
		font-size: 30rpx;
		font-weight: 500;
		color: #ADADAD;
		line-height: 42rpx;
		margin-right: 26rpx;
	}

	.tags {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		.tag {
			padding: 2rpx 6rpx;
			border: 1px solid #ccc;
			border-radius: 6rpx;
			margin-left: 12rpx;

			&.late {
				background-color: rgba(23, 206, 196, 0.2);
				border-color: rgba(13, 174, 232, 0.2);
			}

			&.leave {
				background-color: rgba(253, 201, 83, 0.2);
				border-color: rgba(252, 130, 137, 0.2);
			}

			&.not_backed {
				background-color: rgba(51, 203, 255, 0.2);
				border-color: rgba(22, 146, 228, 0.2);
			}
		}
	}

	.pagination_box {
		padding: 24rpx;
	}
	
	
</style>
